﻿@using Developer.Code
@model IEnumerable<Developer.Entity.Book>
@{
    Layout = "~/Views/Shared/_UILayout.cshtml";
}
<style>
    .search-button {
        width: 100%;
        padding-top: 11px;
        height: 51px;
    }
    .x-title .search {
        width: 100%;
        height: 100%;
        border: solid white 1px;
        margin: 0 auto;
        padding-top: 3px;
        margin-top: 17px;
        display: block;
        border-radius: 50px;
        z-index: 99;
    }

</style>
<div class="x-title mdui-shadow-8">
    <div class="center-block">
        <img class="center-block" src="~/Content/UI/images/logo.png" />
        <h3>"无微不至"的借阅伴侣</h3>
        <p style="margin-top:15px;">
            简介文本简介文本简介文本简介文本简介文本简介文本简介文本简介文本简介文本简介文本简介文本
            简介文本简介文本简介文本简介文本简介文本简介文本简介文本简介文本简介文本简介文本简介文本
            简介文本简介文本简介文本简介文本简介文本简介文本简介文本简介文本简介文本
        </p>
        <div class="search-button" style="width:100%">
            <form class="search">
                <div class="" style="width:100%">
                    <input type="text" placeholder="搜索从这里开始..." />
                    <button type="submit"></button>
                </div>
            </form>
        </div>
        <div class="category" style="width:100%">
            <a href="/Book/Navigation">
                <h5 id="daohang">图书导航</h5>
            </a>
            <a href="/Book/OrderOnline">
                <h5 id="yuding">在线预订</h5>
            </a>
            <a href="/Book/WhatNews">
                <h5 id="xinshu">新书上线</h5>
            </a>
        </div>
    </div>
</div>

<div class="x-content">
    <div class="halfwidth">
        @{
            var books = Model.ToList();
            for (int i = 0; i < books.Count / 2; i++)
            {
                    <div class="mdui-col-xl-6" style="margin-top:13px;" id="@books[i].Id">
                        <div class="mdui-card mdui-shadow-11">
                            <div class="mdui-card-media">
                                <img src="@books[i].CoverImg" />
                                <div class="mdui-card-media-covered">
                                    <div class="mdui-card-primary">
                                        <div class="mdui-card-primary-title">@books[i].Name</div>
                                        <div class="mdui-card-primary-subtitle">@books[i].Author </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            }
        }
    </div>
    <div class="halfwidth">
        @for (int i = books.Count / 2 != 0 ? books.Count / 2 : books.Count / 2 + 1; i < books.Count; i++)
        {
                <div class="mdui-col-xl-6" style="margin-top:13px;" id="@books[i].Id">
                    <div class="mdui-card mdui-shadow-11">
                        <div class="mdui-card-media">
                            <img src="@books[i].CoverImg" />
                            <div class="mdui-card-media-covered">
                                <div class="mdui-card-primary">
                                    <div class="mdui-card-primary-title">@books[i].Name</div>
                                    <div class="mdui-card-primary-subtitle">@books[i].Author </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        }

    </div>


</div>
<script src="~/Content/scripts/jquery-1.10.2.min.js"></script>
<script>
    mui(".halfwidth").on('tap', '.mdui-col-xl-6', function () {
        //获取id
        var id = this.getAttribute("id");
        self.location = "/Book/detail?bookid=" + id;
    });
    $(function () {
        document.getElementById("daohang").addEventListener('tap', function (event) {
            self.location = "/Book/Navigation";
        }, false);
        document.getElementById("yuding").addEventListener('tap', function (event) {
            self.location = "/Book/OrderOnline";
        }, false);
        document.getElementById("xinshu").addEventListener('tap', function (event) {
            self.location = "/Book/whatnews";
        }, false);
    });
</script>